<template>
  <div id="population-density"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

const initChart = () => {
  const chartDom = document.getElementById('population-density');
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '人口密度与流动热力图'
    },
    tooltip: {},
    visualMap: {
      max: 1000,
      inRange: {
        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
      }
    },
    xAxis: {
      type: 'category',
      data: ['区域1', '区域2', '区域3', '区域4', '区域5']
    },
    yAxis: {
      type: 'category',
      data: ['时间1', '时间2', '时间3', '时间4', '时间5']
    },
    color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC'],
    series: [{
      name: '人流量',
      type: 'heatmap',
      data: [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [1, 0, 0], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [2, 0, 0], [2, 1, 0], [2, 2, 0], [2, 3, 0], [2, 4, 0], [3, 0, 0], [3, 1, 0], [3, 2, 0], [3, 3, 0], [3, 4, 0], [4, 0, 0], [4, 1, 0], [4, 2, 0], [4, 3, 0], [4, 4, 0]],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }, {
      name: '人口增长',
      type: 'line',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };

  myChart.setOption(option);
};

onMounted(() => {
  initChart();
});
</script>

<style scoped>
#population-density {
  width: 100%;
  height: 100%;
}
</style> 